import React, { Component } from 'react'
import { Row, Col, Button, Modal, Input, message } from 'antd'
import goodsClassify from './GoodsClassify.module.css'
import { FormOutlined, ToTopOutlined, DeleteOutlined,ExclamationCircleOutlined } from '@ant-design/icons';
import axios from 'axios';
import * as url from '../../util/api';
const { confirm } = Modal

export default class GoodsClassify extends Component {
    constructor(props) {
        super(props)
        this.state = {
            // classifyList: [
            //     { id: 1, classifyName: '哈哈哈' }, { id: 2, classifyName: '嘿嘿嘿' }, { id: 3, classifyName: '呵呵呵' }, { id: 4, classifyName: '啊啊啊' },
            //     { id: 5, classifyName: '嗷嗷嗷' }, { id: 6, classifyName: '啦啦啦' }, { id: 7, classifyName: '滴滴滴' }, { id: 8, classifyName: '嘻嘻嘻' },
            //     { id: 9, classifyName: '冲冲冲' }, { id: 10, classifyName: '急急急' }, { id: 11, classifyName: '嘤嘤嘤' }, { id: 12, classifyName: '去去去' },
            // ]
        }
    }
    getClassify(){
        console.log('获取最新的商品类别！')
        axios({
            url:'/api' + url.selectGoodsType,
            method:'post',
        }).then(res=>{
            
            let arr = res.data.data
            this.setState({
                classifyList:arr
            })
        })
    }
    componentDidMount(){
        // 向服务器发起请求获取商品类别
        this.getClassify()
    }
    showNewClassifyModule = () => {
        this.setState({
            isShowNewClassify: true
        })
    }
    handelNewChange = (e) => {
        let val = e.target.value.replace(/\s+/g, "")//获取属性值
        this.setState({
            newClassifyName: val
        })
    }
    confirmNew = () => {
        // 向服务器发起请求存储商品品牌
        if (this.state.newClassifyName === undefined || this.state.newClassifyName === '') {
            message.error('请输入品牌名字！！！')
        } else {
            // 向服务器发起请求存储商品品牌
            console.log(this.state.newClassifyName,'新增的名字')
            let obj = {
                goodsTypeName:this.state.newClassifyName
            }
            axios({
                url:'/api'+ url.insertGoodsInfo,
                method:'post',
                data:obj
            }).then(res=>{
                if(res.data.data === '新增成功！'){
                    message.success('新增成功！')
                    this.getClassify()
                    this.setState({
                        isShowNewClassify: false,
                        newClassifyName: '',
                    })
                }else{
                    message.success('新增失败!')
                }
            })
            

        }

    }
    handleNewCancel = () => {
        this.setState({
            isShowNewClassify: false,
            newClassifyName: '',
        })
    }

    // 修改类别
    editClassify = (id) => {
        let arr = JSON.parse(JSON.stringify(this.state.classifyList))
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].goodsTypeId === id) {
                this.setState({
                    editClassifyName: arr[i].goodsTypeName,
                    editClassifyId:arr[i].goodsTypeId
                })
            }
        }
        this.setState({
            isShowEditClassify: true
        })
    }
    handelEditChange = (e) => {
        let val = e.target.value.replace(/\s+/g, "")//获取属性值
        this.setState({
            editClassifyName: val
        })
    }
    confirmEdit = () => {
        console.log(this.state.editClassifyName, 66)
        if (this.state.editClassifyName === '') {
            message.error('请输入品牌名字！！！')
        } else {
            console.log(this.state.editClassifyName,this.state.editClassifyId,'我修改的品牌名')
            let obj = {
                goodsTypeId:this.state.editClassifyId,
                goodsTypeName:this.state.editClassifyName
            }
            // 向服务器发起请求 修改品牌名字
            axios({
                url:'/api' + url.updateGoodsInfo,
                method:'post',
                data:obj
            }).then(res=>{
                if(res.data.data === '修改成功！'){
                    message.success('修改成功！！');
                    this.getClassify()
                    this.setState({
                        isShowEditClassify: false
                    })


                }else{
                    message.error('修改失败！');
                }
            })
            
        }

    }
    handleEditCancel = () => {
        this.setState({
            isShowEditClassify: false
        })
    }
    // 置顶商品类别
    toTop = (id) => {
        let arr = JSON.parse(JSON.stringify(this.state.classifyList))
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].goodsTypeId === id) {
                let obj = arr[i];
                arr.splice(i, 1);
                arr.unshift(obj);
            }
        }
        this.setState({
            classifyList: arr
        }, () => {
            message.info('操作成功！！')
        })

    }
    dele
    // 删除类别
    deleteClassify(id) {
        // 向服务器发起请求删除品牌
        let that = this;
        confirm({
            title: '确定删除此账期类型?',
            icon: <ExclamationCircleOutlined />,
            // content: 'Some descriptions',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                
                let arr = JSON.parse(JSON.stringify(that.state.classifyList))
                let deleteId = ''
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i].goodsTypeId === id) {
                        deleteId = arr[i].goodsTypeId
                    }
                }
                console.log(deleteId,'删除的id')
                // 向服务器发起请求
                let obj = {
                    goodsTypeId:deleteId
                }
                axios({
                    url:'/api'+url.deleteGoodsType,
                    method:'post',
                    data:obj,
                }).then(res=>{
                    if(res.data.data === '删除成功！'){
                        message.info('删除成功！！')
                        this.getClassify()    
                    }else{
                        message.error('该类别下还有商品，删除失败！')
                    }
                })
                
            },
            // onCancel() {
            //   console.log('Cancel');
            // },
          });     
    }
    render() {
        return (
            <div className={goodsClassify.content}>
                <Row className={goodsClassify.btnBox}>
                    <Col span={24}>
                        <Button type="primary" className={goodsClassify.newClassify}
                            onClick={this.showNewClassifyModule}>新增</Button>
                        <Modal
                            title="新增商品类别"
                            visible={this.state.isShowNewClassify}
                            onOk={this.confirmNew}
                            cancelText={'取消'}
                            okText={'确定'}
                            onCancel={this.handleNewCancel}
                        >
                            <div>
                                <span className={goodsClassify.newTips}> <span>*</span> 商品类别</span>
                                <Input className={goodsClassify.newClassifyName}
                                    value={this.state.newClassifyName} onChange={this.handelNewChange} />
                            </div>
                        </Modal>
                    </Col>
                </Row>
                {this.state.classifyList?this.state.classifyList.map(item => <Row className={goodsClassify.classify} key={item.goodsTypeId}>
                    <Col span={12}> <span className={goodsClassify.classifyName}>{item.goodsTypeName}</span></Col>
                    <Col span={12}>
                        <div className={goodsClassify.operate}>
                            <button onClick={() => { this.editClassify(item.goodsTypeId) }}><FormOutlined className={goodsClassify.operateIcon} />修改</button>
                            <Modal
                                maskStyle={{ backgroundColor: 'rgba(0,0,0,.15)' }}
                                title="修改商品类别"
                                visible={this.state.isShowEditClassify}
                                onOk={this.confirmEdit}
                                cancelText={'取消'}
                                okText={'确定'}
                                onCancel={this.handleEditCancel}
                            >
                                <div>
                                    <span className={goodsClassify.newTips}> <span>*</span> 商品类别</span>
                                    <Input className={goodsClassify.newClassifyName}
                                        value={this.state.editClassifyName} onChange={this.handelEditChange} />
                                </div>
                            </Modal>
                            <button onClick={() => { this.toTop(item.goodsTypeId) }}><ToTopOutlined className={goodsClassify.operateIcon} />置顶</button>
                            <button onClick={() => { this.deleteClassify(item.goodsTypeId) }} ><DeleteOutlined className={goodsClassify.operateIcon} />删除</button>
                        </div>
                    </Col>
                </Row>):null}

            </div>
        )
    }
}

